<template>
  <div>
    <el-popover trigger="click" @show="popShow" v-model="desc.visible">
      <div style="background:#f7f7f7;">
        <el-input
          size="small"
          ref="descInput"
          v-model.trim="desc.data"
          :placeholder="desc.placeholder"
        >
          <el-button slot="append" size="mini" @click="handel">确定</el-button>
        </el-input>
      </div>
      <el-button size="small" slot="reference" class="mr15">{{desc.title}}</el-button>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'popInput',
  data() {
    return {
    };
  },
  props: ['desc'],
  methods: {
    popShow() {
      this.$nextTick(function focus() {
        this.$refs.descInput.focus();
      });
    },
    handel() {
      this.desc.visible = false;
      if (this.desc.data === '') {
        return;
      }
      let obj = {
        key: this.desc.title,
        value: this.desc.data
      };
      this.desc.data = '';
      this.$emit('output', obj);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
